<template>
  <div class="wrapper">
    <div class="title">我的购物车</div>
    <ul class="productList">
      <li class="productList__product" v-for="item in result" :key="item">
        <h3 class="productList__product__shop" v-show="JSON.stringify(item.products) !==  '{}'">
          {{ item.shopName }}
        </h3>
        <div
          class="productList__product__detail"
          v-for="innerItem in item.products"
          :key="innerItem"
        >
          <img class="productList__product__img" :src="innerItem.imgUrl" />
          <div class="productList__product__right">
            <div class="productList__product__name">
              <b>{{ innerItem.name }}</b>
            </div>
            <p class="productList__product__price">
              <span>&yen;{{ innerItem.price }} × {{ innerItem.count }}</span>
              <span class="productList__product__total"
                >&yen;{{ (innerItem.price * innerItem.count).toFixed(2) }}</span
              >
            </p>
          </div>
        </div>
      </li>
    </ul>
  </div>

  <Docker :currentIndex="1" />
</template>

<script>
import { computed, reactive, ref } from "vue";

import { useStore } from "vuex";
import Docker from "../../components/Docker";
import LoginVue from '../login/Login.vue';

export default {
  name: "CartList",
  components: { Docker },
  setup() {
    const store = useStore();
    const { cartList } = store.state;

    let resultObj = reactive({ shopName: "", products: {} }) ;

    let result = reactive([]);
    for (let i in cartList) {
      const shopName = cartList[i].shopName;

      const products = cartList[i].productList;

      resultObj.shopName = shopName;
   
      resultObj.products = products;


      result.push(JSON.parse(JSON.stringify(resultObj)));
    }

    
   
    

    return { result };
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/viriables.scss";
.wrapper {
  overflow-y: auto;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0.5rem;
  right: 0;
  background: rgb(248, 248, 248);
}
.title {
  line-height: 0.44rem;
  background: $bgColor;
  font-size: 0 0.16rem;
  color: $content-fontcolor;
  text-align: center;
}

.productList {
  padding: 0;
  &__product {
    box-sizing: border-box;
    width: 3.39rem;
    padding: 0.1rem 0.16rem;
    background-color: #fff;
    margin-bottom: 0.2rem;
    margin-left: 0.2rem;
    &__right {
      flex: 1;
    }
    &__img {
      width: 0.46rem;
      height: 0.46rem;
      margin-right: 0.15rem;
    }
    &__name {
      line-height: 0.2rem;
    }
    &__detail {
      display: flex;
      margin: 0.1rem 0;
    }
    &__price {
      display: flex;
      color: red;
    }
    &__total {
      position: relative;
      top: -0.05rem;
      text-align: right;
      flex: 1;
      color: #000;
    }
  }
}
</style>